<template>
  <div class="table-wrap" v-loading="isShow">
    <div class="attachment-form">
      <el-form
        :model="parameter"
        ref="formRules"
        label-width="100px"
        class="demo-ruleForm"
        label-position="top"
        :rules="formRules"
      >
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="attachment-form-title">项目信息</div>
        </div>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item
              label="项目名称"
              :rules="formRules.projectName"
            >
              <el-input
                v-model="parameter.baseInfo.projectName"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="项目编号"
              :rules="formRules.projectNo"
            >
              <el-input
                v-model="parameter.baseInfo.projectNo"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="固定资产投资项目代码">
              <el-input
                placeholder="请输入"
                v-model="
                  parameter.projectBornInfo.gdzctzxmdm
                "
                :disabled="!isDefaultTab"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目分类">
              <el-select
                placeholder="选择项目分类"
                v-model="parameter.xmfl"
                clearable
                disabled
                @change="handleChangeXMLX"
              >
                <el-option
                  v-for="item in xmflOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目类型">
              <el-select
                placeholder="选择项目类型"
                v-model="parameter.xmlx"
                clearable
                :disabled="!isDefaultTab"
              >
                <el-option
                  v-for="item in xmlxOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-show="parameter.xmlx === '5'">
            <el-form-item label="道路一长度">
              <el-input
                v-model="parameter.roadOneLength"
                :disabled="!isDefaultTab"
              >
                <template slot="append">千米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-show="parameter.xmlx === '5'">
            <el-form-item label="道路一宽度">
              <el-input
                v-model="parameter.roadOneWidth"
                :disabled="!isDefaultTab"
              >
                <template slot="append">米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-show="parameter.xmlx === '5'">
            <el-form-item label="道路二长度">
              <el-input
                v-model="parameter.roadTwoLength"
                :disabled="!isDefaultTab"
              >
                <template slot="append">千米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-show="parameter.xmlx === '5'">
            <el-form-item label="道路二宽度">
              <el-input
                v-model="parameter.roadTwoWidth"
                :disabled="!isDefaultTab"
              >
                <template slot="append">米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-show="parameter.xmlx === '6'">
            <el-form-item label="管线长度">
              <el-input
                v-model="parameter.pipelineLength"
                :disabled="!isDefaultTab"
              >
                <template slot="append">千米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-show="parameter.xmlx === '7'">
            <el-form-item label="景观面积">
              <el-input
                v-model="parameter.landscapeArea"
                :disabled="!isDefaultTab"
              >
                <template slot="append">平方米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-show="parameter.xmlx === '8'">
            <el-form-item label="房建面积">
              <el-input
                v-model="parameter.buildArea"
                :disabled="!isDefaultTab"
              >
                <template slot="append">平方米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="土地取得方式">
              <el-select
                placeholder="选择土地取得方式"
                v-model="parameter.tdqdfs"
                clearable
                :disabled="!isDefaultTab"
              >
                <el-option
                  v-for="item in tdqdfsOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发改部门项目立项申报类型">
              <el-select
                placeholder="选择发改部门项目立项申报类型"
                v-model="parameter.fgbmxmlxsblx"
                clearable
                :disabled="!isDefaultTab"
              >
                <el-option
                  v-for="item in fgbmxmlxsblxOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目立项层级">
              <el-select
                placeholder="选择项目立项层级"
                v-model="parameter.xmlxcj"
                clearable
                :disabled="!isDefaultTab"
              >
                <el-option
                  v-for="item in xmlxcjOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目是否涉密">
              <el-select
                placeholder="选择"
                v-model="parameter.baseInfo.xmsfsm"
                clearable
                :disabled="!isDefaultTab"
              >
                <el-option
                  v-for="item in xmsfsmOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <el-select
                placeholder="选择"
                v-model="parameter.status"
                clearable
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在区域">
              <el-select
                placeholder="选择"
                v-model="parameter.area"
                clearable
                :disabled="!isDefaultTab"
              >
                <el-option
                  v-for="item in areaOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用地位置">
              <el-input
                v-model="parameter.address"
                :disabled="!isDefaultTab"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用地面积" prop="ydmj">
              <el-input
                v-model="parameter.ydmj"
                :disabled="!isDefaultTab"
              >
                <template slot="append">平方公里</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目资金来源">
              <!-- <el-select
                placeholder="选择"
                v-model="parameter.xmzjly"
                clearable
              >
                <el-option
                  v-for="item in areaOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
              <el-input
                v-model="parameter.xmzjly"
                :disabled="!isDefaultTab"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目总投资">
              <el-input
                v-model="parameter.xmztz"
                :disabled="!isDefaultTab"
              >
                <template slot="append">万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目工期">
              <el-input
                v-model="parameter.xmgq"
                :disabled="!isDefaultTab"
              >
                <template slot="append">月</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建设规模">
              <el-input
                v-model="parameter.baseInfo.jsgm"
                type="textarea"
                :disabled="!isDefaultTab"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="attachment-form-title">
            申请人信息
          </div>
        </div>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="申请人名称">
              <el-input
                v-model="parameter.sqrName"
                :disabled="!isDefaultTab"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位性质">
              <el-select
                placeholder="选择单位性质"
                v-model="parameter.dwxz"
                clearable
                :disabled="!isDefaultTab"
              >
                <el-option
                  v-for="item in dwxzOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人" prop="lxr">
              <el-input
                v-model="parameter.lxr"
                :disabled="!isDefaultTab"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="lxdh">
              <el-input
                v-model="parameter.lxdh"
                :disabled="!isDefaultTab"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="attachment-form-title">申请材料</div>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>序号</th>
              <th>材料名称</th>
              <th style="width: 40%">上传文件</th>
              <th style="width: 20%" v-if="isDefaultTab">
                操作
              </th>
            </tr>
          </thead>
          <tbody
            v-for="(item, index) in parameter.sqClPoList"
            :key="index"
          >
            <tr>
              <td>{{ item.rank }}</td>
              <td>
                <span
                  class="tip"
                  v-if="item.requiredStatus === 1"
                  >*</span
                >{{ item.name }}
              </td>
              <td style="">
                <el-upload
                  class="upload"
                  :http-request="beforeUpload"
                  :on-preview="onPreview"
                  :file-list="item.dataClFilePoList"
                  :before-upload="beforeUploadSize"
                  action="#"
                  style="position: relative"
                  :on-remove="onRemove"
                  :disabled="!isDefaultTab"
                  accept=".doc,.docx,.pdf,.png,.jpg,.jpeg,.dwg,.mp4,.gif"
                  multiple
                >
                  <el-button
                    type="text"
                    @click="shangchuan(item)"
                    class="fileUpload"
                    v-if="isDefaultTab"
                  >
                    <span
                      class="upload-icon"
                      v-if="true"
                    ></span>
                    <svg-icon
                      icon-class="uploadDeactive"
                      class="upload-deactive-icon"
                      font-size="20"
                      v-else
                    ></svg-icon>
                    <span
                      class="upload-text"
                      :class="
                        isDefaultTab
                          ? ''
                          : 'upload-text-disabled disabled'
                      "
                      >点击上传</span
                    >
                  </el-button>
                </el-upload>
              </td>
              <td v-if="isDefaultTab">
                <div class="table-btn">
                  <!-- <div class="table-btn-item">上传</div> -->
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div class="attachment-form-title">成果材料</div>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>序号</th>
              <th>材料名称</th>
              <th style="width: 40%">上传文件</th>
              <th style="width: 20%" v-if="isDefaultTab">
                操作
              </th>
            </tr>
          </thead>
          <tbody
            v-for="(item, index) in parameter.cgClPoList"
            :key="index"
          >
            <tr>
              <td>{{ item.rank }}</td>
              <td>
                <span
                  class="tip"
                  v-if="item.requiredStatus === 1"
                  >*</span
                >{{ item.name }}
              </td>
              <td style="">
                <el-upload
                  class="upload"
                  :http-request="beforeUpload"
                  :on-preview="onPreview"
                  :file-list="item.dataClFilePoList"
                  :before-upload="beforeUploadSize"
                  action="#"
                  style="position: relative"
                  :on-remove="onRemove"
                  :disabled="!isDefaultTab"
                  accept=".doc,.docx,.pdf,.png,.jpg,.jpeg,.dwg,.mp4,.gif"
                  multiple
                >
                  <el-button
                    type="text"
                    @click="shangchuan(item)"
                    class="fileUpload"
                    v-if="isDefaultTab"
                  >
                    <span
                      class="upload-icon"
                      v-if="true"
                    ></span>
                    <svg-icon
                      icon-class="uploadDeactive"
                      class="upload-deactive-icon"
                      font-size="20"
                      v-else
                    ></svg-icon>
                    <span
                      class="upload-text"
                      :class="
                        isDefaultTab
                          ? ''
                          : 'upload-text-disabled disabled'
                      "
                      >点击上传</span
                    >
                  </el-button>
                </el-upload>
              </td>
              <td v-if="isDefaultTab">
                <div class="table-btn">
                  <!-- <div class="table-btn-item">上传</div> -->
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { queryOptions } from '@/api/dict'
import { getDetail } from '@/api/tudi'
import { queryOptions } from '@/api/dict'
// import { getBasicDetail } from '@/api/jbys'
import { getYdghxkDetail } from '@/api/useLandLicense'
import { downloadOneFile } from '@/api/projectRecord'
import { noticeFileUpload } from '@/api/wisdomBuild'
export default {
  props: {
    currentTab: {
      type: [String, Number],
      default: '0'
    }
  },
  computed: {
    isDefaultTab() {
      if (
        this.$route.query.defaultIndex == this.currentTab &&
        this.type !== 'detail'
      ) {
        return true
      } else {
        return false
      }
    }
  },
  data() {
    return {
      isShow: false,
      parameter: {
        area: '',
        baseInfo: {
          projectName: '',
          projectNo: '',
          xmsfsm: '',
          jsgm: ''
        },
        projectBornInfo: {
          gdzctzxmdm: ''
        }
      },
      formRules: {
        projectNo: [
          {
            required: true,
            message: '项目编号不能为空',
            trigger: 'blur'
          }
        ],
        projectName: [
          {
            required: true,
            message: '项目名称不能为空',
            trigger: 'blur'
          }
        ],
        ydmj: [
          {
            required: true,
            message: '用地面积不能为空',
            trigger: 'blur'
          }
        ],
        lxr: [
          {
            required: true,
            message: '联系人不能为空',
            trigger: 'blur'
          }
        ],
        lxdh: [
          {
            required: true,
            message: '联系电话不能为空',
            trigger: 'blur'
          }
        ]
      },
      dwxzOpiton: [],
      xmlxOption: [],
      tdqdfsOption: [],
      fgbmxmlxsblxOption: [],
      xmlxcjOption: [],
      areaOption: [],
      statusOptions: [],
      dwxzOption: [],
      xmsfsmOption: [],
      xmflOption: [],
      pkid: this.$route.query.pkid
        ? this.$route.query.pkid
        : '',
      type: this.$route.query.type
        ? this.$route.query.type
        : '',
      selectPkId: ''
    }
  },
  async created() {
    await this.getxmlxOption()
    await this.gettdqdfsOption()
    await this.getfgbmxmlxsblxOption()
    await this.getxmlxcjOption()
    await this.getStatusOptions()
    await this.getxmsfsmOption()
    await this.getdwxzOptions()
    await this.getareaOption()
    await this.getxmflOption()
    console.log(this.pkid)
    if (this.pkid !== '') {
      await this.getDetailData()
    }
  },
  mounted() {
    console.log(this.pkid)
  },
  methods: {
    //状态
    getStatusOptions() {
      queryOptions('tdbz_status').then((res) => {
        if (res.success) {
          this.statusOptions = res.data.map((item) => {
            return {
              label: item.dictText,
              value: item.dictValue
            }
          })
        }
      })
    },
    //项目类型
    getxmlxOption() {
      queryOptions(
        this.parameter.xmfl == '0'
          ? 'zhgh_xmfl_jz'
          : 'zhgh_xmfl_sz'
      ).then((res) => {
        if (res.success) {
          this.xmlxOption = res.data.map((item) => {
            return {
              label: item.dictText,
              value: item.dictValue
            }
          })
        }
      })
    },
    //土地取得方式
    gettdqdfsOption() {
      queryOptions('zhgh_tdqdfs').then((res) => {
        if (res.success) {
          this.tdqdfsOption = res.data.map((item) => {
            return {
              label: item.dictText,
              value: item.dictValue
            }
          })
        }
      })
    },
    //发改部门项目立项申报类型
    getfgbmxmlxsblxOption() {
      queryOptions('zhgh_fgbmxmlxsblx').then((res) => {
        if (res.success) {
          this.fgbmxmlxsblxOption = res.data.map((item) => {
            return {
              label: item.dictText,
              value: item.dictValue
            }
          })
        }
      })
    },
    //项目类型层级
    getxmlxcjOption() {
      queryOptions('zhgh_xmlxcj').then((res) => {
        if (res.success) {
          this.xmlxcjOption = res.data.map((item) => {
            return {
              label: item.dictText,
              value: item.dictValue
            }
          })
        }
      })
    },
    //项目分类
    getxmflOption() {
      queryOptions('zhgh_xmfl').then((res) => {
        if (res.success) {
          this.xmflOption = res.data.map((item) => {
            return {
              label: item.dictText,
              value: item.dictValue
            }
          })
        }
      })
    },
    //项目是否涉密
    getxmsfsmOption() {
      queryOptions('zhgh_xmsfsm').then((res) => {
        if (res.success) {
          this.xmsfsmOption = res.data.map((item) => {
            return {
              label: item.dictText,
              value: item.dictValue
            }
          })
        }
      })
    },
    //单位性质
    getdwxzOptions() {
      queryOptions('zhgh_dwxz').then((res) => {
        if (res.success) {
          this.dwxzOption = res.data.map((item) => {
            return {
              label: item.dictText,
              value: item.dictValue
            }
          })
        }
      })
    },
    //所在区域
    getareaOption() {
      queryOptions('area').then((res) => {
        if (res.success) {
          this.areaOption = res.data.map((item) => {
            return {
              label: item.dictText,
              value: item.dictValue
            }
          })
        }
      })
    },
    // 修改项目类型
    handleChangeXMLX() {
      this.parameter.roadOneLength = ''
      this.parameter.roadOneWidth = ''
      this.parameter.roadTwoLength = ''
      this.parameter.roadTwoWidth = ''
      this.parameter.pipelineLength = ''
      this.parameter.landscapeArea = ''
      this.parameter.buildArea = ''
    },
    getDetailData() {
      console.log(this.pkid)
      this.isShow = true
      getYdghxkDetail(this.pkid).then((res) => {
        console.log(res)
        const detail = JSON.parse(JSON.stringify(res.data))
        detail.baseInfo = {
          projectName: res.data.projectName,
          projectNo: res.data.projectNo,
          xmsfsm: res.data.xmsfsm,
          jsgm: res.data.jsgm
        }
        detail.projectBornInfo = {
          gdzctzxmdm: res.data.gdzctzxmdm
        }
        delete detail.projectName
        delete detail.projectNo
        delete detail.xmsfsm
        delete detail.gdzctzxmdm
        this.parameter = detail
        //添加默认项目分类
        if (this.parameter.xmfl == null) {
          this.parameter.xmfl = '1'
          this.parameter.xmflText = '市政项目'
        }
        //添加附件名
        this.addName(this.parameter)
        this.isShow = false
      })
    },
    addName(obj) {
      for (let i = 0; i < obj.sqClPoList.length; i++) {
        for (const key2 in obj.sqClPoList[i]
          .dataClFilePoList) {
          obj.sqClPoList[i].dataClFilePoList[key2].name =
            obj.sqClPoList[i].dataClFilePoList[
              key2
            ].fileName
        }
      }
      for (let i = 0; i < obj.cgClPoList.length; i++) {
        for (const key2 in obj.cgClPoList[i]
          .dataClFilePoList) {
          obj.cgClPoList[i].dataClFilePoList[key2].name =
            obj.cgClPoList[i].dataClFilePoList[
              key2
            ].fileName
        }
      }
    },
    shangchuan(item) {
      console.log(item)
      this.selectPkId = item.pkid
    },
    onRemove(file, fileList) {
      let arr = []
      if (
        this.parameter.sqClPoList.find(
          (item) => item.pkid == file.clId
        )
      ) {
        //申请材料
        arr = this.parameter.sqClPoList.find(
          (item) => item.pkid == file.clId
        ).dataClFilePoList
        console.log(arr, this.parameter)
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].fileId == file.fileId) {
            console.log('删这个', arr[i])
            arr.splice(i, 1)
          }
        }
      } else {
        //成果材料
        arr = this.parameter.cgClPoList.find(
          (item) => item.pkid == file.clId
        ).dataClFilePoList
        console.log(arr, this.parameter)
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].fileId == file.fileId) {
            console.log('删这个', arr[i])
            arr.splice(i, 1)
          }
        }
      }
      console.log(arr)
    },
    downloadDaochu(data, fileName) {
      const blob = new Blob([data]) // 把得到的结果用流对象转一下
      const a = document.createElement('a') // 创建一个<a></a>标签
      a.href = URL.createObjectURL(blob) // 将流文件写入a标签的href属性值
      a.download = fileName // 设置文件名
      a.style.display = 'none' // 障眼法藏起来a标签
      document.body.appendChild(a) // 将a标签追加到文档对象中
      a.click() // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove() // 一次性的，用完就删除a标签
    },
    xiazai(file) {
      downloadOneFile(file).then((res) => {
        this.downloadDaochu(
          res,
          file.fileName ? file.fileName : file.name
        )
      })
    },
    onPreview(file) {
      console.log(file)
      this.xiazai(file)
    },
    beforeUpload(file) {
      file = file.file
      const param = new FormData()
      param.append('file', file)
      noticeFileUpload(param).then(async (res) => {
        // await this.parameter.sqClPoList
        //   .find((item) => item.pkid == this.selectPkId)
        //   .dataClFilePoList.push({
        //     name: file.name,
        //     fileId: res.data
        //   })
        if (
          this.parameter.sqClPoList.find(
            (item) => item.pkid == this.selectPkId
          )
        ) {
          //申请材料
          this.parameter.sqClPoList
            .find((item) => item.pkid == this.selectPkId)
            .dataClFilePoList.push({
              name: file.name,
              fileId: res.data
            })
        } else {
          // 成果材料
          this.parameter.cgClPoList
            .find((item) => item.pkid == this.selectPkId)
            .dataClFilePoList.push({
              name: file.name,
              fileId: res.data
            })
        }
      })
      console.log(this.parameter)
    },
    beforeUploadSize(file) {
      if (file.size / (1024 * 1024) > 10) {
        // 限制文件大小
        alert('当前限制文件大小不能大于10M')
        return false
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload {
  position: absolute !important;
  right: -25% !important;
  top: 50% !important;
  transform: translate(50%, -50%) !important;
  &-list {
    &__item {
      margin-top: 0px;
      .el-upload-list__item-name {
        :first-child {
          margin-top: 8px;
        }
        :last-child {
          margin-bottom: 8px;
        }
      }
      .el-upload-list__item-status-label {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .el-icon-close {
        // position: absolute;
        top: 50% !important;
        transform: translateY(-50%) !important;
      }
    }
  }
}
.upload {
  //   .el-upload-list--text{
  //   position: absolute !important;
  //   right: -25% !important;
  //   top: 50% !important;
  //   transform: translate(50%,-50%) !important;
  // }
  cursor: pointer;
  // height: 0px;

  &-text {
    // position: absolute;
    // top: -35px;
    // left: 260px;
    color: #00baff;
    // display: none;
  }
  &-text-disabled {
    color: rgb(176, 176, 176);
  }
  &-icon {
    // position: absolute;
    position: absolute !important;
    right: -25% !important;
    top: 50% !important;
    transform: translate(50%, -50%) !important;
    width: 16px;
    height: 14px;
    // top: -22px;
    // left: 240px;
    background: url('~@/assets/images/wisdom-construction/upload-file.png');
    background-size: 100% 100%;
  }
  &-deactive-icon {
    position: absolute !important;
    right: -25% !important;
    top: 50% !important;
    transform: translate(50%, -50%) !important;
    width: 16px;
    height: 14px;
  }
  .fileUpload {
    position: absolute !important;
    right: -25% !important;
    top: 50% !important;
    transform: translate(50%, -50%) !important;
  }

  .el-upload-list__item {
    margin-top: 0px !important;
  }
}
.attachment-form {
  padding: 0 27px;
  &-title {
    color: #4c565c;
    display: flex;
    align-items: center;
    margin: 18px 0 14px 0;
    font-size: 16px;
    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 14px;
      background: linear-gradient(180deg, #40ebff, #bcf8ff);
      margin-right: 7px;
    }
  }
  .table {
    border-collapse: collapse;
    width: 100%;
    box-sizing: border-box;
    margin-left: 7px;
    margin-bottom: 80px;
    thead {
      background-color: #f2f6fb;
    }
    td,
    th {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #6b767d;
      line-height: 42px;
      border: 1px solid #f2f6fb;
      text-align: center;
    }
    td {
      font-weight: normal;
    }
    tbody {
      tr {
        td {
          &:nth-child(1) {
            width: 50px;
          }
          &:nth-child(2) {
            width: 300px;
          }
          &:nth-child(3) {
            width: 300px;
          }
          &:nth-child(4) {
            max-width: 1000px;
          }
          &:nth-child(5) {
            width: 300px;
          }
        }
      }
    }
  }
}
.disabled {
  cursor: default;
}

.tip {
  color: #f56c6c;
  margin-right: 5px;
}
</style>
